<template>
	<view :class="`nav-bar ${filter ? 'nav-bar-filter' : ''}`" :style="{ background: themeColor }">
		<view class="nav-bar-spacing" :style="{ 'justify-content': back ? 'space-between' : 'center' }">
			<view v-if="back" class="nav-bar__back" :style="{ 'background-color': titleColor }" @click="handleToBack" />

			<text class="nav-bar__title text-ellipsis-single" :style="{ color: titleColor || 'black' }">
				{{ title }}
			</text>

			<view v-if="back" class="nav-bar__search"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'musichead',
	data() {
		return {};
	},
	props: {
		// 导航标题
		title: {
			type: String,
			default: '未知标题'
		},
		//背景是否开启滤镜
		filter: {
			type: Boolean,
			default: false
		},
		//背景是否显示
		bg: {
			type: Boolean,
			default: true
		},
		//是否显示返回按钮
		back: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		titleColor() {
			return this.$store.getters['theme/getCurTheme'].navigationBarColor;
		},
		themeColor() {
			return this.bg ? this.$store.getters['theme/getCurTheme'].backgroundColorCard : 'transparent';
		}
	},
	methods: {
		//返回上一页
		handleToBack() {
			console.log("sdddddddd");
			const curPages = getCurrentPages();
			// 当没有上一页的时候直接返回主页
			if (curPages.length === 1) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			} else {
				uni.navigateBack({ delta: 1 });
			}
		},
		handleToHome() {
			uni.navigateTo({
				url: '/pages/index/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.nav-bar {
	// 遮住原本的背景色
	z-index: 1001;
	position: fixed;
	top: -10px;
	left: 0;
	width: 100%;
	padding-top: calc(var(--my-status-bar-height) + 10px);
	height: var(--nav-tab-height-custom);
	overflow: hidden;

	.nav-bar-spacing {
		z-index: 1003;
		display: flex;
		align-items: center;
		width: 100%;
		height: var(--nav-tab-height-custom);
		box-sizing: border-box;
		position: relative;

		.nav-bar__title {
			z-index: 1003;
			color: var(--nav-title-color);
			font-weight: 700;
			font-size: 33.33rpx;
			line-height: 1.5;
			padding: 0 64rpx 0 32rpx;
			box-sizing: border-box;
		}

		.nav-bar__back,
		.nav-bar__search {
			 z-index: 1003;
			flex-shrink: 0;
			height: 100%;
			width: 44.8rpx;
			padding: 0 30rpx;
			position: relative;
		}

		.nav-bar__back {
			mask-position: center;
			mask-repeat: no-repeat;
			mask-image: url('@/static/icon-arrow-left.png');
			mask-size: auto 44.8rpx;
		}
	}
}
</style>
